<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>常见样式</title>
    <!--在style标签中设置本页面的内容-->
    <style>
        /*使用标签选择器设置样式*/
        div {
            /*设置边框 可以设置边框的线条宽度，线条样式、颜色
            线条样式有：solid表示实线，dashed表示虚线，dotted表示点线
            border: 1px solid red;
            在css中设置颜色有三种方式，分别为：
                自然界的颜色都是通过红绿蓝三种颜色混合而成，
                1. 使用颜色的单词名称，如red、blue等；只能用于常见的颜色表示
                2. 使用16进制表示颜色，通过每一个颜色的配比，调整成颜色；
                如 #ffffff表示白色，#000000表示黑色，#ff0000表示纯红色；
                3. 使用rgb表示颜色，通过红绿蓝三种颜色混合而成，
                如rgb(255,0,0)表示红色，rgb(0,255,0)表示绿色，rgb(0,0,255)表示蓝色；
            */
            /*通过border可以设置所有的边框*/
            border: 1px dotted #6d717f;
            /*如果我们要设置某一个单独的边框，可以通过border-top|left|right|bottom设置*/
            border-top: 1px solid red;
            /*边框中还可以设置边框圆角*/
            /*border-radius: 10px;表示所有位置的角度都设置为10px*/
            /*border-radius: 10px 20px 30px 40px;
            表示四个角的角度分别为10px（左上）、20px（右上）、30px（右下）、40px（左下）*/
            border-radius: 10px;
            /*border-bottom-left-radius: 50px;*/

            /*可以通过width和height属性设置长宽，单位为像素*/
            width: 100px;
            height: 100px;

            /*设置背景内容*/
            background-color: deepskyblue;
            /*设置背景图片，需要通过url()函数将图片从本地中引入；
            在设置背景图片时，如果图片大小小于容器大小，那么图片会自动平铺；*/
            background-image: url("/resource/verify_code.jpg");
            /*设置背景图片时，可以通过background-repeat属性设置是否平铺
            以及平铺的方式，repeat表示水平和垂直方向都平铺，
            repeat-x表示水平方向平铺，repeat-y表示垂直方向平铺，*/
            background-repeat: repeat;

            /*设置文字样式，主要和font属性相关*/
            font-size: 15px;
            /*设置文字的风格，可以通过font-style设置，
            italic表示斜体，normal表示正常，oblique表示倾斜*/
            font-style: italic;
            /*设置文字的粗细，可以通过font-weight设置*/
            font-weight: bolder;
            /*设置文字的字体，可以通过font-family设置*/
            font-family: 宋体, serif;

            /*设置内部数据的对齐方式，可以通过text-align设置，
            只能设置水平方向的对齐*/
            text-align: center;
            /*设置内部数据垂直方向的对齐，可以通过设置行高的方式设置（不建议使用）*/
            /*line-height: 100px;*/
        }

        /*给div设置一个hover伪类选择器，表示当鼠标悬停时，设置样式*/
        div:hover {
            border: 1px solid red;
            width: 110px;
            height: 110px;
            /*设置边框阴影
            box-shadow: 1px 1px 5px #c3bdbd;
            第一个参数表示水平偏移量，第二个参数表示垂直偏移量，
            第三个参数表示模糊半径，第四个参数表示阴影颜色
            */
            box-shadow: 3px 3px 5px #c3bdbd;
            /*修改鼠标指针的样式，样式包括wait等待、pointer手型、crosshair十字型、text文本型、
            move移动型、help帮助型、default默认型*/
            cursor: help;
        }

        ul {
            /*文本的修饰，分为：none表示没有修饰，underline表示下划线，
            line-through表示删除线，overline表示上划线*/
            text-decoration: underline;
            /*设置列表的样式，可以通过list-style-type设置，
            none表示没有样式，disc表示实心圆，circle表示空心圆，square表示实心方块*/
            list-style-type: square;
            list-style-image: url("/resource/img.svg");
        }
    </style>
</head>
<body>
<div>
    这是div内容，这是一个段落
    <p>这是一个段落</p>
</div>

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
    <li>列表5</li>
</ul>
</body>
</html>